<template>
  <div>
    <el-table
      ref="Table"
      :data="tableData"
      tooltip-effect="dark"
      v-loading="loading"
    >
      <el-table-column label="车间" prop='workshopName'></el-table-column>
      <el-table-column label="产线" prop='lineName'></el-table-column>
      <el-table-column label="工单编号" prop='erpOrderNo'></el-table-column>
      <el-table-column label="生产产品" prop="itemName"></el-table-column>
      <el-table-column label="计划产量" prop='planQuantity' width='80'></el-table-column>
      <el-table-column label="完工量" prop='actualQuantity' width='80'></el-table-column>
      <el-table-column label="计划完成率" prop='planQuantity' width='100'>
        <template slot-scope="{ row }">
          <span>{{(row && row.planQuantity && row.actualQuantity) ? ((row.actualQuantity/row.planQuantity)*100).toFixed(2) + '%' : 0}}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产效率" prop='productEfficiency' width='80'>
        <template slot-scope="{ row }">
          <span>{{(row && row.productEfficiency) ? (row.productEfficiency*100).toFixed(2) + '%' : 0}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划开始时间" prop='planStarttime' min-width="150"></el-table-column>
      <el-table-column label="计划完成时间" prop='planEndtime' min-width="150"></el-table-column>
    </el-table>
    <pagination
      v-if='pager.total > 5'
      :total="pager.total"
      :pageSizes="[5,10,20]"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
  import {getUnClosedOrder} from "@/api/workbench/index";
  import { mapState,mapActions,mapGetters} from "vuex";
export default {
  props:{
    lineIds:{
      type:String,
      default:""
    },
    abnormalData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      activeName:"1",
      tableData:[],
      loading: false,
      queryParams:{
        lineIds:""
      },
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 5
      },
      refreshTimer:null
    };
  },

  // created() {
  //   this.getList()
  // },

  methods:{
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getList();
        this.setRefreshTimer();
      },60000)
    },
    getList() {
      this.loading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query: {
          lineIds:this.queryParams.lineIds
        },
        pageNum,
        pageSize,
      };
      getUnClosedOrder(param)
        .then((res) => {
          this.tableData = res?.rows || this.tableData;
          this.pager.total = res?.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.pager.total = 0;
          this.loading = false;
        });
    }
  },

  watch:{
    lineIds:{
      handler(newVal){
        if(newVal){
          this.queryParams.lineIds = newVal;
        }
        this.getList()
        // 清除轮询
        if (this.refreshTimer) {
          clearTimeout(this.refreshTimer);
        }
        this.setRefreshTimer()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 100%;
  .clearfix{
    display:flex;
    // justify-content: space-between;
    align-items: center;
    color: #F59A23;
    .block-title{
      margin-bottom: 0;
    }
    ::v-deep.el-tabs{
      display: flex;
      align-items: center;
      margin-left:30px;
      .item {
        margin-right:30px;
        .el-link--inner{
          display: flex;
          align-items: flex-end;
          img{
            width: 18px;
            height: 18px;
          }
          .name{
            padding:0 6px
          }
        }
      }
      .el-tabs__content{
        margin: 0 0 0.9375rem;
      }
    }
    .date{
      text-align: right;
      flex: 1;
      span{
        color: #34855B;
        font-size: 14px;
        margin-right: 20px;
      }
    }
  }
  .title-common{
    .title{
      display:flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1F2E4D;
      margin-bottom:14px;
      .title-name{
        margin: 0;
      }
    }
  }
  .monitor{
    .title{
      margin-top:14px;
      .title-name{
        margin-right:16px;
      }
      i{
        cursor: pointer;
      }
    }
  }
}

</style>
